<template>
  <p-card :bordered="false" class="containent">
    <!-- 查询区域 -->
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <!-- 头部条码扫描 -->
      <p-row type="flex" :gutter="24">
        <p-col flex="auto">
          <p-form-model layout="inline" :model="topForm" :rules="rules">
            <p-row :gutter="24">
              <p-col :xl="8" :md="12">
                <p-form-model-item label="条码扫描">
                  <p-input
                    placeholder="请扫描"
                    @pressEnter="afterScan"
                  ></p-input>
                </p-form-model-item>
              </p-col>
              <p-col :xl="8" :md="12">
                <p-form-model-item label="线体">
                  <p-select v-model="topForm.lineno" allowClear>
                    <p-select-option
                      v-for="item in lines"
                      :key="item.codeValue"
                      :value="item.codeValue"
                      >{{ item.textValue }}</p-select-option
                    >
                  </p-select>
                </p-form-model-item>
              </p-col>
              <p-col :xl="8" :md="12">
                <p-form-model-item label="工站">
                  <p-tree-select
                    v-model="topForm.stationCode"
                    :tree-data="stations"
                    :dropdown-style="{ maxHeight: '500px' }"
                    tree-node-filter-prop="title"
                    show-search
                    allow-clear
                    tree-default-expand-all
                    @change="changeHandler"
                  />
                </p-form-model-item>
              </p-col>
            </p-row>
          </p-form-model>
        </p-col>
        <p-col style="padding-top: 2px">
          <p-button type="primary" @click="setConfigVisible">配置项</p-button>
          <p-button class="ml10" type="primary" @click="resetScanResults"
            >重新扫描</p-button
          >
          <p-button type="primary" style="margin: 0 10px">工序交接</p-button>
          <p-button type="primary">容器拆分</p-button>
        </p-col>
      </p-row>
      <!-- 扫码信息 -->
      <div class="product-execu-title">
        <config-step
          ref="configStep"
          :current="currentStep"
          :type="scanType"
          class="float-right"
          style="width: auto; min-width: 50%"
          size="small"
          @success="setScanOrders"
          :station-code="topForm.stationCode"
        />
        扫码信息
      </div>
      <p-form-model
        layout="inline"
        :model="formSearch"
        :rules="ruleScan"
        ref="ruleForm"
      >
        <p-row :gutter="24">
          <p-col :sm="8">
            <p-form-model-item label="地址码" prop="addressCode">
              <p-input
                readOnly
                placeholder=""
                v-model.trim="formSearch.addressCode"
              ></p-input>
            </p-form-model-item>
          </p-col>
          <p-col :sm="8">
            <p-form-model-item label="容器码" prop="containerCode">
              <p-input
                placeholder=""
                v-model.trim="formSearch.containerCode"
                readOnly
              ></p-input>
            </p-form-model-item>
          </p-col>
          <p-col :sm="8">
            <p-form-model-item label="接收人员" prop="acceptorName">
              <p-input
                readOnly
                placeholder=""
                v-model.trim="formSearch.acceptorName"
              ></p-input>
            </p-form-model-item>
          </p-col>
        </p-row>
      </p-form-model>
      <!-- 当前容器绑定清单 -->
      <div class="product-execu-title">
        <p-button class="float-right" type="primary" @click="accessArea"
          >入周转区</p-button
        >
        当前容器绑定清单
      </div>
      <div class="bottom-form">
        <p-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :pagination="false"
          :columns="columns"
          :dataSource="dataSource"
          :loading="loading"
        />
      </div>
    </div>
    <config
      ref="view"
      :type="scanType"
      v-model="configVisible"
      @success="onScanConfigSuccess"
      :station-code="topForm.stationCode"
    ></config>
  </p-card>
</template>

<script>
import { api } from "@/api/manage";
import { filterObj, timestampToDatetime } from "@/utils/util";
import { postAction, getAction, deleteAction } from "@/api/manage";
import mixins from "./modules/line-station";
import configMixins from "./modules/configMixins";
//工序工单采集清单
const columns = [
  {
    title: "序号",
    dataIndex: "",
    key: "rowIndex",
    width: 60,
    align: "center",
    customRender: function (t, r, index) {
      return parseInt(index) + 1;
    },
  },
  {
    title: "线体 ",
    align: "center",
    dataIndex: "lineName",
  },
  {
    title: "地址码",
    align: "center",
    dataIndex: "addressCode",
  },
  {
    title: "工序工单",
    align: "center",
    dataIndex: "productName",
  },
  {
    title: "产品编码",
    align: "center",
    dataIndex: "productCode",
  },
  {
    title: "产品名称",
    align: "center",
    dataIndex: "productName",
  },
  {
    title: "PN/SN",
    align: "center",
    dataIndex: "pnsn",
  },
  {
    title: "组件编码",
    align: "center",
    dataIndex: "componentCode",
  },
  {
    title: "交接数量",
    align: "center",
    dataIndex: "pnsnQty",
  },
];
export default {
  name: "",
  mixins: [mixins, configMixins],
  data() {
    return {
      url: {
        containerInfo:
          "/mes-manufacture/mfContainer/getContainerInfoByContainer", //获取容器相关信息
        accessArea: "/mes-manufacture/mfContainer/MfContainerInHandoverParam", //入周转区
      },
      formSearch: {},
      size: "a",
      columns: [],
      columns1: [],
      dataSource: [],
      ipagination: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ["5", "10"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      containerInfo: [],
      loading: false,
      ruleScan: {
        addressCode: [
          { required: true, message: "请输入地址码", trigger: "blur" },
        ],
        acceptorName: [
          { required: true, message: "请扫描接收人员  ", trigger: "blur" },
        ],
      },
      scanType: "Areaexchange",
    };
  },
  computed: {},
  created() {
    this.columns = columns;
  },
  methods: {
    // 扫码结果
    afterScan(event) {
      this.addScanResults(event);
      const len = this.scanResults.length;
      const code = this.scanResults[len - 1];
      const item = this.scanOrders[len - 1];
      switch (item.scanType) {
        case 3:
          this.formSearch.containerCode = code;
          this.getContainerInfo();
          break;
        // 人员条码
        case 4:
          this.formSearch.acceptorName = code;
          break;
        // 地址码
        case 6:
          this.formSearch.addressCode = code;
          break;
      }
    },
    //入周转区
    accessArea() {
      this.$refs.ruleForm.validate((value) => {
        if (value) {
          this.loading = true;
          let params = {
            ...this.formSearch,
            containerCode: this.formSearch.containerCode,
            lineCode: this.topForm.lineno,
            lineName: this.topForm.lineName,
            stationCode: this.topForm.stationCode,
            stationName: this.topForm.stationName,
          };
          postAction(this.url.accessArea, params)
            .then((res) => {
              if (res.data) {
                this.$message.success("入周转区成功");
                this.getContainerInfo(this.formSearch.containerCode, "refresh");
              } else {
                this.$message.success(res.msg);
              }
            })
            .finally(() => {
              this.loading = false;
            });
        }
      });
    },
    customResetScanResults() {
      this.formSearch = {};
      this.dataSource = [];
    },
    //获得容器信息
    getContainerInfo(refresh) {
      this.loading = true;
      let params = {
        containerCode: this.formSearch.containerCode,
      };
      postAction(this.url.containerInfo, params)
        .then((res) => {
          if (res.success) {
            this.dataSource = res.data.childrens;
            this.dataSource.map((item) => {
              this.$set(item, "addressCode", res.data.addressCode);
            });
            if (!refresh) {
              this.$message.success("扫描容器成功");
            }
          } else {
            this.$message.warning(res.msg);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
